
<template>
    <div>
        <!--        搜索表单-->
        <el-form :inline="true" :model="SearchForm" class="demo-form-inline" style="height: 50px">
            <el-form-item >
                <el-input v-model="SearchForm.goodsname" placeholder="商品名"></el-input>
            </el-form-item>
            <el-form-item>
                <el-date-picker
                        v-model="SearchForm.beginTime"
                        type="date"
                        placeholder="选择创建日期">
                </el-date-picker>
                ——
                <el-date-picker
                        v-model="SearchForm.endTime"
                        type="date"
                        placeholder="选择结束日期">
                </el-date-picker>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="initTable()">查询</el-button>
            </el-form-item>
        </el-form>
        <!--        表格回显-->
        <el-table
                :data="tableData"
                border
                style="width: 100%">
            <el-table-column
                    prop="gsid"
                    label="编号">
            </el-table-column>
            <el-table-column
                    prop="gname"
                    label="商品名称">
            </el-table-column>
            <el-table-column
                    prop="img"
                    label="商品图片"
                    width="87px"
                    align="center">
                <template slot-scope="scope">
                    <img :src="scope.row.img" width="50" height="30">
                </template>
            </el-table-column>
            <el-table-column
                    prop="purchaseprice"
                    label="进价">
            </el-table-column>
            <el-table-column
                    prop="sellingprice"
                    label="售价">
            </el-table-column>
            <el-table-column
                    prop="gmt_create"
                    label="收藏时间">
            </el-table-column>
            <el-table-column
                    align="center"
                    label="操作"
                    width="250px">
                <template slot-scope="scope">
                    <router-link  :to="{name: 'DetailId', params: {id: scope.row.gsid}}">
                        <el-button type="primary" size="mini">查看商品</el-button>
                    </router-link>
                </template>
            </el-table-column>
        </el-table>
        <!--        分页插件-->
        <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page.sync=this.SearchForm.currentPage
                :page-sizes="pageSizes"
                :page-size=this.SearchForm.pageSize
                layout="total, sizes, prev, pager, next, jumper"
                :total="total">
        </el-pagination>
    </div>

</template>



<script>
    export default {
        name: "MyShouCang01",
        data() {
            return {
                tableData:[],
                SearchForm:{
                    currentPage: 1,
                    //每也显示的个数
                    pageSize: 3,
                    beginTime:"",
                    endTime:"",
                    goodsname:""
                },
                pageSizes:[1,3,5,7],
                //总条数
                total:0,
            }
        },
        created() {
            this.initTable()
        },
        computed:{

        },
        methods: {
            initTable(){
                this.$http.post("/goods/goods/findAllCollect",this.SearchForm).then(result=>{
                    console.log(result)
                    this.tableData = result.data.data.records
                    this.total = result.data.data.total;
                })
            },
            handleSizeChange(val) {
                this.SearchForm.pageSize = val
                this.initTable();
            },
            handleCurrentChange(val) {
                this.SearchForm.currentPage = val
                this.initTable()
            },
        }
    }

</script>

<style lang="scss" rel="stylesheet/scss" scoped>
    .pay {
        width: 200px;
        height: 50px;
        border: 1px solid #fff;
        float: left;
        background-repeat: no-repeat;
        background-position: center center;

        &.pay_ali {
            background-image: url();
            margin-left: 20px;


        }

        &.pay_weixin {
            background-image: url();
            margin-left: 0px;

        }
    }

    .modal_body {
        height: 310px;
        overflow: auto;
        font-size: 91%;
        width: 460px;
    }
    .person_info[data-v-049ea09a] {
        min-height: 400px;
        padding-bottom: 30px;
    }

    .course_content[data-v-049ea09a] {
        height: 86px;
        padding: 25px 0;
        margin: 0 25px;
        border-bottom: 2px solid #f2f2f2;
        position: relative;
    }

    .cl:before, .clearfix:before, .container:before {
        content: "";
        display: table;
    }

    .course_content .img_box[data-v-049ea09a] {
        display: inline-block;
        width: 175px;
        height: 86px;
    }

    .fl {
        float: left;
    }

    .course_content img[data-v-049ea09a] {
        width: 175px;
        height: 86px;
    }

    img {
        max-width: 100%;
        border: none;
    }

    .course_content p.course_name[data-v-049ea09a] {
        margin-left: 20px;
        width: 640px;
        color: #333;
    }

    .course_content a[data-v-049ea09a] {
        display: block;
        width: 106px;
        height: 36px;
        line-height: 36px;
        text-align: center;
        border-radius: 6px;
        font-size: 14px;
        border: 1px solid #999;
        color: #999;
        background: #fff;
        position: absolute;
        top: 25px;
        right: 0;
        cursor: pointer;
    }

    a {
        margin: 0;
        padding: 0;
        border: 0;
        font-size: 100%;
        vertical-align: baseline;
        background: transparent;
        text-decoration: none;
    }

    .course_content a.close_collect[data-v-049ea09a] {
        top: 80px;
        border: none;
    }

    .course_content p.course_name[data-v-049ea09a] {
        margin-left: 20px;
        width: 640px;
        color: #333;
    }

    .course_content p[data-v-049ea09a] {
        font-size: 14px;
        color: #999;
    }

    .person_content[data-v-049ea09a] {
        width: 1012px;
        float: right;
        background: #fff;
        border-radius: 6px;
    }
    .notdata{
        text-align: center;
        padding: 60px 0;
        font-size: 30px;
        color: #999;
        min-height: 300px;
        i{
            font-size: 30px;
            padding-right: 12px;
        }
    }
    .person_title[data-v-049ea09a] {
        border-bottom: 1px solid #f2f2f2;
        position: relative;
    }

    .cl:before, .clearfix:before, .container:before {
        content: "";
        display: table;
    }

    .person_title li.now[data-v-049ea09a] {
        border-bottom: 2px solid #d51423;
    }

    .person_title li.now a[data-v-049ea09a], .person_title li a[data-v-049ea09a]:hover {
        color: #d51423;
    }

    .person_title li[data-v-049ea09a] {
        float: left;
        line-height: 60px;
        padding: 0 30px;
        font-size: 14px;
    }

    a {
        color: #333;
    }

    .person_title li[data-v-049ea09a] {
        float: left;
        line-height: 60px;
        padding: 0 30px;
        font-size: 14px;
    }

    a {
        color: #333;
    }
</style>